<template>
  <div class="resourceCategory">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button size="small" @click='addCategory'>添加</el-button>
      </div>
      <el-table
        :data="categoryList"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          type="index"
          label="编号"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          align="center">
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createdTime | timeAmend }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button @click="categoryEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="getCategoryDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 子组件addCategory -->
   <add-category ref="category" @refreshCategory="doRefresh"></add-category>
  </div>
</template>

<script>
import { getResourceCategory, categoryDel } from '@/services/resource'
// 引入添加资源分类的组件
import addCategory from './components/addCategory'
export default {
  name: 'resourceCategory',
  components: {
    addCategory
  },
  data () {
    return {
      categoryList: [],
      loading: false
    }
  },
  created () {
    this.getResourceCategory()
  },
  methods: {
    async getResourceCategory () {
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        this.categoryList = data.data
      }
      console.log(data)
    },
    addCategory () {
      // 调用子组件的categoryOpen()方法
      this.$refs.category.categoryOpen()
    },
    doRefresh () {
      this.getResourceCategory()
    },
    // 资源分类编辑
    categoryEdit (val) {
      this.addCategory()
      this.$refs.category.getcategoryEdit(val)
    },
    // 删除数据
    getCategoryDel (id) {
      this.$confirm('确认删除吗?', '提示')
        .then(async () => {
          const { data } = await categoryDel(id)
          if (data.code === '000000') {
            const index = this.categoryList.findIndex(item => item.id === id)
            this.categoryList.splice(index, 1)
          }
          this.$message.success('删除成功!')
        }).catch(() => {
          this.$message.info('已取消删除')
        })
    }
  },
  filters: {
    timeAmend (val) {
      const date = new Date(val)
      function getDate (value) {
        if (value < 10) {
          return '0' + value
        }
        return value
      }
      return `
        ${date.getFullYear()}-${getDate(date.getMonth() + 1)}-${getDate(date.getDate())}
        ${getDate(date.getHours())}:${getDate(date.getMinutes())}:${getDate(date.getSeconds())}
      `
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body{
  padding: 20px 0 !important;
}
.el-table{
  margin-top: 20px !important;
}
</style>
